<template>
    <div class="personal-body-container">
        <a-tabs default-active-key="1" :tab-position="'left'" class="my-ant-tabs">
            
            <a-tab-pane key="1" tab="个人中心" >
                <h3>个人信息</h3>
                <div class="personInfo-container">
                    <div class="personInfo-item">
                        <div>
                            <span>昵称</span>
                            <span @click="showNickNameModal = true">修改</span>
                            <a-modal v-model="showNickNameModal" title="修改昵称" @ok="updateUserInfoFunction({nickname: userInfoForm.nickname})">
                                <a-input placeholder="请输入新昵称" type="text" v-model="userInfoForm.nickname" name="nickname" />
                            </a-modal>
                        </div>
                        <!-- 昵称 -->
                        <div>{{ $store.state.userInfo.nickname }}</div>
                    </div>
                    <div class="personInfo-item">
                        <div>
                            <span>手机号</span>
                            <span @click="showMobileModal = true">修改</span>
                            <a-modal v-model="showMobileModal" title="修改手机号" @ok="updateUserInfoFunction({phone:userInfoForm.mobile})">
                                <a-input placeholder="请输入新手机号" type="text" v-model="userInfoForm.mobile" name="mobile" />
                                <div style="display: flex;margin-top:10px;">
                                    <a-input placeholder="请输入验证码" type="text" v-model="userInfoForm.checkCode" name="checkCode" />
                                    <a-button @click="btnGetCheckCode" style="margin-left: 20px;">获取验证码</a-button>
                                </div>
                            </a-modal>
                        </div>
                        <div>{{ $store.state.userInfo.phone }}</div>
                    </div>
                    <div class="personInfo-item">
                        <div>
                            <span>密码</span>
                            <span @click="showPasswordModal = true">修改</span>
                            <a-modal v-model="showPasswordModal" title="修改密码" @ok="updateUserPassword">
                                <a-input placeholder="请输入旧密码" type="text" v-model="userInfoForm.password" name="password" />
                                <a-input placeholder="请输入新密码" type="text" v-model="userInfoForm.newPassword" name="newPassword" />
                                <a-input placeholder="请输入确认密码" type="text" v-model="userInfoForm.confirmPassword" name="confirmPassword" />
                            </a-modal>
                        </div>
                        <div>******</div>
                    </div>
                    <!-- 头像上传 -->
                    <div class="personInfo-item">
                        <div><img :src="BASE_URL+$store.state.userInfo.avatar" alt=""></div>
                        <div>
                            <a-upload name="file" 
                                multiple="false"
                                action="/tlykt/upload" 
                                :headers="{token:$store.state.userInfo.token}"  
                                @change="handleUploadFile"
                                showUploadList="false"
                                >
                                <a-button> <a-icon type="upload" />修改头像</a-button>
                            </a-upload>
                        </div>
                    </div>
                </div>
            </a-tab-pane>
            <a-tab-pane key="2" tab="我的课程">
                <p>课程</p>
            </a-tab-pane>
            <a-tab-pane key="3" tab="我的订单">
                <p>订单</p>
            </a-tab-pane>
        </a-tabs>
    </div>
</template>

<script>
import { updateUserInfo } from '@/api/request';
import { BASE_URL,UPLOAD_URL } from '@/utils/constants';
export default {
    name: 'PersonalBody',
    data() {
        return {
            // 用户信息表单
            userInfoForm:{
                nickname: '',
                mobile: '',
                checkCode: '',
                password: '',
                newPassword: '',
                confirmPassword: '',
            },
            // 修改昵称模态框
            showNickNameModal: false,
            // 修改手机号模态框
            showMobileModal: false,
            // 修改密码手机号模态框
            showPasswordModal: false,
            BASE_URL:BASE_URL,
            UPLOAD_URL:UPLOAD_URL,
        }
    },
    methods: {
        // 更新头像
          handleUploadFile(info) {
            if (info.file.status !== 'uploading') {
                console.log(info.file, info.fileList);
            }
            if (info.file.status === 'done') {
                // 获取上传成功的返回值
                const response = info.file.response;
                this.$message.success(`${info.file.name} 文件上传成功`);
                console.log('response', response);
                // 前缀
                const baseUrl='http://localhost:8080/tlykt/data/'
                // 获取上传成功后的文件名
                const avatar=response.data[0];
                // 完整路径
                let realAvatar =baseUrl+ response.data[0];
                console.log('realAvatar', realAvatar);

                this.updateUserInfoFunction({avatar: avatar})

                // 如果返回了新的头像URL，则更新用户信息
                if (response && response.data) {
                    // 更新 Vuex 中的用户信息
                    this.$store.commit('setUserInfo', {
                        ...this.$store.state.userInfo,
                        avatar: avatar
                    });
                }
            } 
            else if (info.file.status === 'error') {
                this.$message.error(`${info.file.name} 文件上传失败。`);
            }
        },
        // 修改用户信息
        updateUserInfoFunction(data) {
            console.log("data",data);
             
            updateUserInfo(data)
            .then(res => { 
                const data=res.data;
                console.log("res.data",data)
                if(res.code==200){
                    this.$message.success(res.msg);
                }else{
                    this.$message.error(res.msg);
                }
                // 根据返回的新数据，更新vuex中的用户信息
                this.$store.commit('setUserInfo', {
                    ...this.$store.state.userInfo, 
                    ...data
                })
                this.showNickNameModal=false
                this.showMobileModal=false
                this.showPasswordModal=false
            })
            .catch(error => { 
                console.log(error); 
                this.showNickNameModal=false
                this.showMobileModal=false
                this.showPasswordModal=false
            })
        },
        // 更新用户密码
        updateUserPassword(){
            // 校验旧密码是否正确
            // if (this.userInfoForm.password !== this.$store.state.userInfo.password) {
            //     this.$message.error('旧密码错误');
            //     return;
            // }
            // 校验密码是否为空
            if (!this.userInfoForm.newPassword) {
                this.$message.error('请输入新密码');
                return;
            }
            // 校验新密码是否为空
            if (!this.userInfoForm.confirmPassword) {
                this.$message.error('请输入确认密码');
                return;
            }
            // 校验密码是否一致
            if (this.userInfoForm.newPassword !== this.userInfoForm.confirmPassword) {
                this.$message.error('两次输入的密码不一致');
                return;
            }

            this.updateUserInfoFunction({password: this.userInfoForm.password,
                newPassword: this.userInfoForm.newPassword,
            })
            
        },
        userModifyNickName() {
            console.log('userModifyNickName,修改昵称');
        },
        userModifyMobile() {
            console.log('userModifyMobile,修改手机号');

        },
        btnGetCheckCode() {
            console.log('btnGetCheckCode,获取验证码');
        },
        userModifyPassword() {
            console.log('userModifyPassword,修改密码');
        },
        updateUserInfo(){
            console.log('updateUserInfo,更新用户信息');
        }
    }
}
</script>

<style lang="less" scoped>
.personal-body-container {
    width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;

    .personInfo-container {
        padding: 40px;

        .personInfo-item {
            border-bottom: 1px solid #ddd;
            margin: 0 0 20px 0;

            >div:first-of-type {
                margin-bottom: 20px;

                >span:first-of-type {
                    font-size: 20px;


                }

                >span:nth-of-type(2) {
                    margin-left: 10px;
                    color: rgb(0, 178, 120);
                }
            }

            >div:nth-of-type(2) {
                font-size: 20px;
                margin-bottom: 10px;
            }
        }
    }

}
</style>
<style>
.ant-input {
    margin-bottom: 20px !important;
}

.ant-tabs-nav .ant-tabs-tab-active {
    color: rgb(0, 178, 120) !important;

}

.ant-tabs-ink-bar {
    background-color: rgb(0, 178, 120) !important;
}

.ant-modal-footer .ant-btn-primary {
    background-color: rgb(0, 178, 120) !important;
}
.personInfo-item img{
    width: 200px;
    
}
.my-ant-tabs{
    min-height: 400px;
}
</style>
